<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <title>Sign Up</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="icon" th:href="@{/ico/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="../static/css/font-awesome.css" th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/my-style.css" th:href="@{/css/my-style.css}">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <!-- //Fonts -->
    <!--验证码-->
    <link rel="stylesheet" href="../static/css/verify.css" th:href="@{/css/verify.css}">
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/verify.min.js" th:src="@{/js/verify.min.js}"></script>


</head>
<body>

    <div class="main-sec inner-page">
        <!-- //header -->
 <header th:replace="_fragments :: menu(-1)" class="py-sm-3 pt-3 pb-2" id="home">
     <div class="container">
         <!-- nav -->
         <div class="top-w3pvt d-flex">
             <div id="logo">
                 <h1> <a href="index.html"><span class="log-w3pvt">B</span>aggage</a> <label class="sub-des">Online Store</label></h1>
             </div>
 
             <div class="forms ml-auto">
                 <a href="login.html" class="btn"><span class="fa fa-user-circle-o"></span> 登录</a>
                 <a href="register.html" class="btn"><span class="fa fa-pencil-square-o"></span> 注册</a>
             </div>
         </div>
         <div class="nav-top-wthree">
             <nav>
                 <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                 <input type="checkbox" id="drop" />
                 <ul class="menu">
                     <li class="active"><a href="index.html">主页</a></li>
                     <li><a href="about.html">关于我们</a></li>
                     <li>
                         <!-- First Tier Drop Down -->
                         <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                         </label>
                         <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                         <input type="checkbox" id="drop-2" />
                         <ul>
                             <li><a href="coming.html" class="drop-text">Services</a></li>
                             <li><a href="about.html" class="drop-text">Features</a></li>
                             <li><a href="goods.html" class="drop-text">Single Page</a></li>
 
                         </ul>
                     </li>
 
                     <li><a href="shop.html">商品</a></li>
                     <li><a href="contact.html">联系我们</a></li>
                 </ul>
             </nav>
             <!-- //nav -->
             <div class="search-form ml-auto">
                 <div class="form-w3layouts-grid">
                     <form action="#" method="post" class="newsletter">
                         <input class="search" type="search" placeholder="Search here..." required="">
                         <button class="form-control btn" value=""><span class="fa fa-search"></span></button>
                     </form>
                 </div>
             </div>
             <div class="clearfix"></div>
         </div>
     </div>
 </header>
        <!-- //header -->

    </div>

    <!-- //banner-->
    <!--/login -->
    <section class="banner-bottom py-5">
        <div class="container">
            <div class="content-grid">
                <div class="text-center icon">
                    <span class="fa fa-user-circle-o"></span>
                </div>
                <div class="content-bottom">
                    <form action="#" method="post">
                        <div class="field-group">

                            <div class="content-input-field">
                                <input name="username" id="username" type="text" value="" placeholder="用户名">
                            </div>
                        </div>
                        <div class="field-group">

                            <div class="content-input-field">
                                <input name="email" id="email" type="email" value="" placeholder="邮箱" >
                            </div>
                        </div>
                        <div class="field-group">
                            <div class="content-input-field">
                                <input name="password" id="myInput" type="password" placeholder="密码">
                            </div>
                        </div>
                        <!--验证码-->
                        <div class="field-group">
                            <div id="mpanel5" class="display-none">
                            </div>
                        </div>

                        <div class="content-input-field">
                            <p href="#" class="msg" style="text-align: center"></p>
                            <button id="submit" class="btn" type="button">注册</button>

                        </div>
                        <div class="list-login-bottom text-center mt-lg-5 mt-4">

                            <a href="#" class="">通过点击注册，我同意你的条款</a>


                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- /login -->
    <!--/shipping-->
   <section class="shipping-wthree">
        <div class="shiopping-grids d-lg-flex">
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"><span class="fa fa-truck" aria-hidden="true"></span>
                </div>
                <div class="icon-gd-info">
                    <h3>免费送货</h3>
                    <p>所有订单超过2000元</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd sec text-center">
                <div class="icon-gd"><span class="fa fa-bullhorn" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>免费返回</h3>
                    <p>30天内第一次兑换</p>
                </div>
            </div>
            <div class="col-lg-4 shiopping-w3pvt-gd text-center">
                <div class="icon-gd"> <span class="fa fa-gift" aria-hidden="true"></span></div>
                <div class="icon-gd-info">
                    <h3>会员折扣</h3>
                    <p>注册,节省29%</p>
                </div>

            </div>
        </div>

    </section>
    <!--//shipping-->
    <!-- footer -->
    <div th:replace="_fragments :: footer" class="footer_agileinfo_topf py-5">
        <div class="container py-md-5">
            <div class="row">
                <div class="col-lg-3 footer_wthree_gridf mt-lg-5">
                    <h2><a href="index.html"><span>B</span>aggage
                        </a> </h2>
                    <label class="sub-des2">Online Store</label>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-4">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="index.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Home</a>
                        </li>
                        <li>
                            <a href="about.html"><span class="fa fa-angle-right" aria-hidden="true"></span> About</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop</a>
                        </li>
                        <li>
                            <a href="shop.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Collections</a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Extra Page</a>
                        </li>

                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span> Terms & Conditions</a>
                        </li>
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Shop Single</a>
                        </li>
                        <li>
                            <a href="contact.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Contact Us</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="login.html"><span class="fa fa-angle-right" aria-hidden="true"></span> Login </a>
                        </li>

                        <li>
                            <a href="register.html"><span class="fa fa-angle-right" aria-hidden="true"></span>Register</a>
                        </li>
                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span>Privacy & Policy</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="w3ls-fsocial-grid">
                <h3 class="sub-w3ls-headf">Follow Us</h3>
                <div class="social-ficons">
                    <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span> Facebook</a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span> Twitter</a></li>
                        <li><a href="#"><span class="fa fa-google"></span>Google</a></li>
                    </ul>
                </div>
            </div>
            <div class="move-top text-center mt-lg-4 mt-3">
                <a href="#home"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
    <!-- //footer -->

    <!-- copyright -->
    <div class="cpy-right text-center py-3">
        <p>Copyright &copy; 2020. 2.2  記憶ミ || 初见ミ</p>
    </div>
    <!-- //copyright -->

</body>
<script type="application/javascript">

    //验证码是否通过
    var verification_code = false;

    //验证码
    $('#mpanel5').pointsVerify({
        defaultNum : 6,	//默认的文字数量
        checkNum : 3,	//校对的文字数量
        vSpace : 5,	//间隔
        imgName : ['1.jpg', '2.jpg'],
        imgSize : {
            width: '100%',
            height: '150px',
        },
        barSize : {
            width : '100%',
            height : '40px',
        },
        ready : function() {
        },
        success : function() {
         //   alert('验证成功，添加你自己的代码！');
            //......后续操作
            //验证码通过
            verification_code = true;

        },
        error : function() {
            $(".msg").text("验证码错误");

        }

    });



    $(function () {
        var passwordStatus;
        var username;
        var password;
        var email

        $("input[name='password']").blur(function () {
        //监听输入框
             passwordStatus = $("input[name='password']").is(':focus');
             username = $("input[name='username']").val();
             password = $("input[name='password']").val();
             email = $("input[name='email']").val();
            if (username !="" && password !="" && email != ""){
                $("#mpanel5").removeClass("display-none");
            }
        });

        //表单提交
        $("#submit").click(function () {

            if ($("input[name='username']").val() == ""){
                $(".msg").text("请输入账号");
                return;
            }

            var reg = new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
            email = $("input[name='email']").val();
            if(!reg.test(email)) {
                if (email == ""){
                    $(".msg").text("邮箱不能为空！");
                    return;
                }
                $(".msg").text("邮箱格式不正确，请重新输入！");
                return;
            }
            if ($("input[name='password']").val() == ""){
                $(".msg").text("请输入密码");
                return;
            }


            if (verification_code ==false){
                $(".msg").text("请输入验证码");
                return;
            }

            $.ajax({
                url: "/register",
                type: "post",
                dataType: "json",
                success:function (data,) {
                    if (data.status == "success"){
                        $(".msg").text(data.msg);
                        setTimeout(function () {
                            window.location.href="login";
                        },"1300");

                    }
                    else{
                        $(".msg").text(data.msg);
                    }
                },
                data:{username:$("input[name='username']").val(),
                      password:$("input[name='password']").val(),
                      email:$("input[name='email']").val()
                },
                error:function (data,status) {
                    console.log(data,status);

                }
            });

        });


    });

</script>
</html>
